<template>
     <ul class="todo-main">
        <TodoItem 
          :deltodo="deltodo" 
          v-for="item in todolist" 
          :key="item.id" :item="item"
          :checkedTodo="checkedTodo"
        />

        <li class="todo-empty" v-if="!todolist.length">暂无数据</li>
      </ul>
</template>

<script>
import TodoItem from './TodoItem.vue';
    export default {
        name: "TidoMain",
        components: {
            TodoItem
        },
        props: {
          todolist: {
            type: Array,
            required: true
          },
          deltodo: {
            type: Function,
            required: true
          },
          checkedTodo: {
            type: Function,
            required: true
          }
        }
    }
</script>

<style scoped>
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
  list-style: none;
  text-align: center;
}
</style>